import React, { Component } from 'react';
import { Col, Row, Input, Button, Flex, Divider, Breadcrumb, Layout, Menu, theme, MenuProps, Space, Image, Tag, Card, Typography, List } from 'antd';
import { DesktopOutlined, FileOutlined, PieChartOutlined, TeamOutlined, UserOutlined } from '@ant-design/icons';
import type { GetProps } from 'antd';
import Nav from '../Tool/Nav'
import HeaderComponent from '../Tool/Header';
import logo from '../Tool/logo.png'
import PageImage from './PageImage.png'

type MenuItem = Required<MenuProps>['items'][number];

type SearchProps = GetProps<typeof Input.Search>;

const onSearch: SearchProps['onSearch'] = (value, _e, info) => console.log(info?.source, value);

const { Content, Footer } = Layout;

const { Title, Paragraph, Text, Link } = Typography;

const App: React.FC = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  return (
    <Layout>
      <HeaderComponent />
      <Layout>
        <Nav defaultSelectedKey='1' />
        <Content style={{ padding: '0 48px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>支持人员</Breadcrumb.Item>
            <Breadcrumb.Item>首页</Breadcrumb.Item>
            {/*最后一面包屑内容为点击查看详情的名*/}
          </Breadcrumb>
          <div
            style={{
              background: colorBgContainer,
              minHeight: 280,
              padding: 24,
              borderRadius: borderRadiusLG,
            }}
          >
            <Row>
              <Col span={22} offset={1}>
                <Flex justify='cneter' align='center'>
                  <Title level={2}>欢迎来到本系统!</Title>
                </Flex>
                <Space>
                  <Image src={PageImage} alt="PageImage" style={{ width: '100%', height: '50%' }} />
                </Space>
                <Divider />
              </Col>
            </Row>
          </div>
        </Content>
      </Layout>
      <Footer>
        <Flex justify='center' align='center'>
          <Paragraph>版权所有 © 2024 软件项目管理 #4</Paragraph>
        </Flex>
      </Footer>
    </Layout>
  );
};

export default App;